<script setup lang="ts">
import {
  darkTheme,
  dateEnUS,
  dateZhCN,
  enUS,
  lightTheme,
  zhCN,
} from 'naive-ui';

const { locale } = useI18n();
const themeStore = useThemeStore();

// 服务端初始化主题
onServerPrefetch(() => {
  themeStore.initTheme();
});

// 主题计算属性，确保服务端和客户端一致
const theme = computed(() => {
  return themeStore.isDark ? darkTheme : lightTheme;
});

// Naive UI 国际化配置
const naiveLocale = computed(() => {
  return locale.value === 'en' ? enUS : zhCN;
});

// Naive UI 日期国际化配置
const naiveDateLocale = computed(() => {
  return locale.value === 'en' ? dateEnUS : dateZhCN;
});
</script>

<template>
  <div>
    <n-config-provider
      :theme="theme"
      :locale="naiveLocale"
      :date-locale="naiveDateLocale"
    >
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </n-config-provider>
  </div>
</template>
